<template>
  <div class="select-component">
    <!-- <div class="select-content" @click="togglePopup">
        <div class="title"><span >营业时间</span></div>
        <div class="text"><span >{{selectText}}</span></div>
        <div class="icon"><span>></span></div>
    </div> -->
    <mt-popup class="pop-div" v-model="popupVisibleTime" position="bottom">
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
export default {
    props: [
        'popupVisibleTime'
    ],
    data() {
        return {
            selectText:'10:00',
            popstatus : this.popupVisibleTime,
            slots: [
                {
                flex: 1,
                values: ['00', '01', '02', '03', '04', '05','06','07','08','09','10','11','12',
                        '13','14','15','16','17','18','19','20','21','22','23','24'],
                className: 'slot1',
                textAlign: 'right'
                }, {
                divider: true,
                content: ':',
                className: 'slot2'
                }, {
                flex: 1,
                values: ['00', '01', '02', '03', '04', '05','06','07','08','09','10','11','12',
                        '13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28',
                        '29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44',
                        '45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60'],
                className: 'slot3',
                textAlign: 'left'
                }
            ]
        }
    },
    mounted(){
        
    },
    // watch: {
    //     popupVisibleTime(val) {
    //         this.popstatus = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
    //     },
    //     popstatus(val){
    //     //xxcanghai 小小沧海 博客园
    //         this.$emit("popstatus",val);//③组件内对myResult变更后向外部发送事件通知
    //     }
    // },
    methods: {
        togglePopup(){
            this.popstatus = !this.popstatus
            //this.$emit('popstatus',this.popstatus);
        },
        onValuesChange(picker, values) {
           if(values[0] && values[1]){
                this.selectText = values[0] + ':' + values[1];
                this.$emit('selectTexted',this.selectText);
                this.$emit('popstatus',this.popstatus)
            }
            
            
        }  
    }
}
</script>

<style lang="stylus">
.select-component
    background:#fff
    .pop-div
        width:100%
    .select-content
        display:flex
        flex-direction: row
        padding:10px
        font-size:15px
        span
            dislpay:inline-block
        .title
            flex:0 0 105px
        .text
            flex:1
            text-align:left
            padding-right:10px
            color:#989898
        .icon
            flex:0 0 20px
            color:#989898
</style>